<template>
	<div class="container-fluid">
		<div class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">计划维度报表</h3>
			</div>
			<el-row>
					<el-col :span="24">
						<collapse-view content="高级搜索">
							<el-form :model="queryParams" label-width="80px" label-position="right" :inline="true" ref="searchForm">
								<!-- <el-form-item label="组织名称">
									<el-input v-model="queryParams.name" placeholder="输入组织名称查询" clearable></el-input>
								</el-form-item>
								<el-form-item label="组织编码">
									<el-input v-model="queryParams.code" placeholder="输入组织编码查询" clearable></el-input>
								</el-form-item> -->

								<el-form-item label="状态">
									<el-select v-model="queryParams.status" placeholder="选择组织编码查询" clearable>
										<el-option v-for="statu in status" :key="statu.value" :label="statu.label" :value="statu.value"></el-option>
									</el-select>
								</el-form-item>

								<el-form-item label="计划时间">
									<el-date-picker
								      v-model="queryParams.created_at"
								      type="datetimerange"
								      value-format="yyyy-MM-dd HH:mm:ss"
								      range-separator="至"
								      start-placeholder="开始日期"
								      end-placeholder="结束日期">
								    </el-date-picker>
								</el-form-item>
								<el-form-item>
									<el-button @click="fetchXunDianShuJus">搜索</el-button>
									<el-button @click="clearSearchForm">清除</el-button>
								</el-form-item>
							</el-form>
						</collapse-view>
					</el-col>
				</el-row>
			<div class="panel-body">
				<el-table :data="collections.data" style="width: 100%" v-loading="loading">
					<el-table-column label="状态" prop="status_str"></el-table-column>
					<el-table-column label="组织名称" prop="shop.name"></el-table-column>
					<el-table-column label="组织编码" prop="shop.code"></el-table-column>
					<el-table-column label="用户名称" prop="user.name"></el-table-column>
					<el-table-column label="计划完成时间" prop="created_at"></el-table-column>
					<el-table-column label="实际完成时间" prop="xun_dian_ji_lu.created_at"></el-table-column>
				</el-table>
			</div>
			<div class="panel-footer text-right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
											 :current-page="queryParams.page"
											 :page-sizes="[10, 20, 50, 100]"
											 :page-size="queryParams.paginate"
											 layout="total, sizes, prev, pager, next, jumper"
											 :total="collections.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../apis'
	import { mapState, mapActions } from 'vuex'
	import Vue from 'vue';

	export default {
		name: "xun-dian-shu-ju",
		data () {
			return {
				// 表格加载动画
				loading: false,

				// 弹出加载动画
				loadingMinXi: false,

				// 巡店数据
				collections: {
					data: [],
					total: 0,
				},
				status: [
					{
						value: '',
						label: '全部'
					},{
						value: 0,
						label: '未完成'
					},{
						value: 1,
						label: '已完成'
					},
				],
				// 巡店分页查询信息
				queryParams: {
					page: 1,
					paginate: 10,
					name: '',
					code: '',
					status: '',
					created_at: '',
				},
			}
		},
		methods: {
			/**
			 * 获取组织数据集合
			 */
			fetchXunDians () {
				this.loading = true;
				api.report.plan_report(this.queryParams).then(response => {
					this.collections = response.data;
					this.loading = false;
				})
			},
			fetchAllXunDian () {
				this.fetchByIDXunDian();
			},
			/**
			 * 当改变分页大小时重新获取组织数据
			 */
			handleSizeChange (size) {
				this.queryParams.paginate = size;
				this.fetchXunDians();
			},
			/**
			 * 当改变页码时重新获取组织数据
			 */
			handleCurrentChange (index) {
				this.queryParams.page = index;
				this.fetchXunDians();
			},
			/**
			 * 搜索查询
			 */
			fetchXunDianShuJus () {
				this.fetchXunDians();
			},
			/**
			 * 清空搜索表单
			 */
			clearSearchForm () {
				this.queryParams.name = '';
				this.queryParams.code = '';
				this.queryParams.created_at = '';
				this.queryParams.status = '';
			},
		},
		mounted () {
			this.fetchXunDians();
		}
	}
</script>

<style>

</style>
